<template>
	<div>
		<div>
			<el-dialog title="编辑会员升级规则" :visible.sync="dialogMemberRuleVisible">
				<el-form :model="memberRule" ref="memberRule" label-width="100px" class="demo-ruleForm">
					<el-input v-model="memberRule.id" type="hidden"></el-input>
					<el-form-item label="名称" prop="name"><el-input v-model="memberRule.name"></el-input></el-form-item>
					<el-tooltip effect="dark" content="用户消费总额达到此升级金额条件会员自动升级" placement="top-start">
						<el-form-item label="升级金额" prop="overAmount"><el-input v-model="memberRule.overAmount" :disabled="memberRule.id == 1"></el-input></el-form-item>
					</el-tooltip>
					<el-tooltip effect="dark" content="用户购物消费时实际支付每一元能获取积分数,如1.1则每支付1元获取1.1积分" placement="top-start">
						<el-form-item label="积分赚取比率" prop="earnPointRate"><el-input v-model="memberRule.earnPointRate"></el-input></el-form-item>
					</el-tooltip>
					<el-form-item>
						<el-button @click="cancelMemberRule()">取消</el-button>
						<el-button type="primary" @click="submitMemberRule()">确定</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<div>
			<el-dialog :title="pointRuleTitle" :visible.sync="dialogPointRuleVisible">
				<el-form :model="pointRule" ref="memberRule" label-width="120px" class="demo-ruleForm">
					<el-input v-model="pointRule.id" type="hidden"></el-input>
					<el-form-item label="名称" prop="name"><el-input v-model="pointRule.name"></el-input></el-form-item>
					<el-tooltip effect="dark" :content="pointRateTitle" placement="top-start">
						<el-form-item :label="pointRateTitle" prop="pointRate"><el-input v-model="pointRule.pointRate"></el-input></el-form-item>
					</el-tooltip>
					<el-form-item>
						<el-button @click="cancelPointRule()">取消</el-button>
						<el-button type="primary" @click="submitPointRule()">确定</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>管理会员升级规则</span></div>
					<div class="boxcard-body">
						<el-table :data="memberRuleList" style="width: 100%;" row-key="id" :header-cell-style="{ 'background-color': '#EEEEEE' }">
							<el-table-column prop="id" label="ID"></el-table-column>
							<el-table-column prop="name" label="名称"></el-table-column>
							<el-table-column prop="memberLevel" label="会员等级"></el-table-column>
							<el-table-column prop="overAmount" label="升级金额"></el-table-column>
							<el-table-column prop="earnPointRate" label="积分赚取比率"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="warning" size="small" @click="updateMemberRule(scope.row)">修改</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>管理通用规则</span></div>
					<div class="boxcard-body">
						<el-table :data="pointRuleList" style="width: 100%;" row-key="id" :header-cell-style="{ 'background-color': '#EEEEEE' }">
							<el-table-column prop="id" label="ID"></el-table-column>
							<el-table-column prop="name" label="名称"></el-table-column>
							<el-table-column prop="eearnType" label="类别"></el-table-column>
							<el-table-column prop="pointRate" label="规则"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="warning" size="small" @click="updatePointRule(scope.row)">修改</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { get, postJson, postXform } from '@/utils/request.js';
export default {
	created() {
		this.listMemberRule();
		this.listPointRule();
	},
	data() {
		return {
			memberRuleList: [],
			pointRuleList: [],
			dialogMemberRuleVisible: false,
			memberRule: {
				id: null,
				name: null,
				overAmount: null,
				earnPointRate: null
			},
			dialogPointRuleVisible: false,
			pointRule: {
				id: null,
				name: null,
				pointRate: null
			},
			pointRuleTitle:"管理积分规则",
			pointRateTitle:"积分比率/积分值"
		};
	},
	methods: {
		listMemberRule() {
			get('/rule/listMemberRule', {}).then(res => {
				this.memberRuleList = res.data.data;
			});
		},
		listPointRule() {
			get('/rule/listPointRule', {}).then(res => {
				this.pointRuleList = res.data.data;
			});
		},
		updateMemberRule(row) {
			this.memberRule = {
				id: row.id,
				name: row.name,
				overAmount: row.overAmount,
				earnPointRate: row.earnPointRate
			};
			this.dialogMemberRuleVisible = true;
		},
		updatePointRule(row) {
			this.pointRule = {
				id: row.id,
				name: row.name,
				pointRate: row.pointRate
			};
			this.dialogPointRuleVisible = true;
			this.pointRuleTitle="管理积分规则";
			this.pointRateTitle="积分比率/积分值";
			if(this.pointRule.id==7) {
				this.pointRuleTitle="管理分销商提成规则";
				this.pointRateTitle="提成比率";
			} else if(this.pointRule.id==9) {
				this.pointRuleTitle="管理分销商申请条件";
				this.pointRateTitle="任意一单实付超过";
			}
		},
		submitMemberRule() {
			postXform('rule/updateMemberRule', {
				id: this.memberRule.id,
				overAmount: this.memberRule.overAmount,
				earnPointRate: this.memberRule.earnPointRate,
				name: this.memberRule.name
			}).then(res => {
				this.$message({ message: '操作成功', type: 'success' });
				this.listMemberRule();
				this.dialogMemberRuleVisible = false;
			});
		},
		cancelMemberRule() {
			this.dialogMemberRuleVisible = false;
		},
		submitPointRule() {
			postXform('rule/updatePointRule', {
				id: this.pointRule.id,
				pointRate: this.pointRule.pointRate,
				name: this.pointRule.name
			}).then(res => {
				this.$message({ message: '操作成功', type: 'success' });
				this.listPointRule();
				this.dialogPointRuleVisible = false;
			});
		},
		cancelPointRule() {
			this.dialogPointRuleVisible = false;
		}
	}
};
</script>

<style lang="less">
.pagination {
	margin: 10px 0;
	position: relative;
	display: flex;
}
</style>
